<template>
    <div>
		<el-form :model="queryForm" :inline="true">
            <el-form-item>
                <el-input v-model="queryForm.title" clearable placeholder="标题"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="init()">查询</el-button>
            </el-form-item>
		</el-form>
	</div>
	
	<div style="margin-top: 1%;">
        <el-table :data="tableData" style="width: 100%;" stripe :border="true" highlight-current-row size="large">
            <el-table-column prop="title" label="帖子标题" />
            <el-table-column prop="coverImage" label="封面图" >
                    <template #default="scope">
                        <el-image :src="imageBaseURL + scope.row.coverImage" style="width: 100%;" fit="contain" :preview-src-list="[imageBaseURL + scope.row.coverImage]" preview-teleported/>
                    </template>
            </el-table-column>
            <el-table-column prop="state" label="状态" :formatter="stateFormatter"/>
            <el-table-column prop="views" label="浏览次数"/>
            <el-table-column prop="createTime" label="发布时间" :formatter="formatterTime"/>
            <el-table-column prop="updateTime" label="修改时间" :formatter="formatterTime"/>
            <el-table-column label="操作" width="180">
                <template #default="scope">
                <el-button size="small" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="total, sizes, prev, pager, next" style="margin-top: 2%;"
            :page-sizes="[10, 20, 50]"
            @size-change="init"
            @current-change="init"
            v-model:page-size="queryForm.pageSize"
            v-model:current-page="queryForm.page"
            :total="totalData"
        />
	</div>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue"
import { imageBaseURL, formatterTime } from "@/global"
const { proxy } = getCurrentInstance()

const queryForm = reactive({})
const totalData = ref(0)


let tableData = ref([]);
const init = async () => {
	let params = Object.assign({}, queryForm);
	let result = await proxy.axios.post('forum/myList', params)
	if (!result) {
	  return;
	}
	tableData.value = result.list;
	totalData.value = result.total;
}
init();

const handleDetail = (idx, rowData) => {
	window.open('/detail/' + rowData.id)
}

const handleDelete = async (idx, rowData) => {
	ElMessageBox.confirm(
        '确定要删除吗?',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
    .then(() => {
        doDelete(rowData.id)
    })
}
const doDelete = async (id) => {
	let result = await proxy.axios.patch('forum/delete/' + id)
	if (!result) {
	  return
	}
	proxy.msg.success('删除成功')
	init() // 刷新一下列表
}

// const handleCommentDelete = async (id) => {
// 	ElMessageBox.confirm(
//         '确定要删除吗?',
//         'Warning',
//         {
//             confirmButtonText: '确认',
//             cancelButtonText: '取消',
//             type: 'warning',
//         }
//     )
//     .then(() => {
//         doCommentDelete(id)
//     })
// }

const stateFormatter = (row, column, cellValue, index) => {
	if (cellValue === 0) {
		return '审核中'
	}
	if (cellValue === 1) {
		return '审核通过'
	}
	if (cellValue === 2) {
		return '审核拒绝'
	}
	return '未知状态'
}

</script>

<style lang="scss" scoped>

</style>